import { useEffect, useRef } from "react";
import { init, graphic } from "echarts";

interface Props {
  value: number;
  width: number;
}
export default function SpeedGauge(props: Props): Props {
  const { value, width, fontSize } = props;
  const domRef = useRef(null);

  const initChart = () => {
    const chart = init(domRef.current, "purple");

    const {clientWidth, clientHeight } = domRef.current;
    const ratio = clientWidth/1000;
    chart.setOption({
      series: [
        {
          type: "gauge",
          startAngle: 210,
          endAngle: -30,
          radius: "100%",
          center: ['50%', '60%'],
          progress: {
            roundCap: true,
            show: true,
            width: width,
            itemStyle: {
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#7D40FF" },
                { offset: 1, color: "#02A4FF" },
              ]),
              shadowColor: "rgba(2)",
              shadowBlur: 10,
            },
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: width,
              color: [[1, "#05050F"]],
            },
          },
          detail: {
            valueAnimation: true,
            fontSize: ratio * 90,
            color: "#ffffff",
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            distance:   width/2,
            length:  ratio * 10,
            lineStyle: {
              width: 2,
              color: "#999",
            },
          },
          axisLabel: {
            distance:  ratio * 30 + width/2,
            color: "#999",
            fontSize: ratio * 40 < 20 ? 20 : ratio * 40,
          },
          pointer: {
            icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
            length: "90%",
            width: ratio * 30,
            offsetCenter: [0, "5%"],
          },
          title: {
            show: false,
          },

          data: [
            {
              value: value,
            },
          ],
        },
      ],
    });
  };

  useEffect(() => {
    initChart();
  }, []);
  return <div ref={domRef} className="size-full"></div>;
}
